<template>
    <div v-loading="dm.loading">
        <div class="zc-box-toolbar">
            <slot name="toolbar"></slot>
        </div>
        <div class="zc-box-table-content">
            <el-table :data="dm.data" header-cell-class-name="zc-box-table-header">
                <!--是否需要selection-->
                <el-table-column v-if="selection === true" type="selection" width="55"/>
                <!--具体表格列表-->
                <slot name="columns"></slot>
                <!--具体表格操作列-->
                <el-table-column
                        v-if="operate && operate.display === true"
                        :width="operate.width ? operate.width : '55px'"
                        #default="{ row }"
                        label="操作"
                >
                    <template v-for="item in operate.buttons" :key="item.label">
                        <el-button
                                v-if="item.display"
                                :size="item.size ? item.size : 'small'"
                                :disabled="item.disabled ? item.disabled(row) : false"
                                link
                                type="primary"
                                @click="item.doClick && item.doClick(row)"
                        >{{ item.label }}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="zc-box-pagination">
                <el-pagination
                        v-model:current-page="dm.params.page"
                        v-model:page-size="dm.params.size"
                        :page-sizes="dm.pageSizes"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="dm.total"
                        @size-change="doSizeChange"
                        @current-change="doCurrentChange"
                />
            </div>
        </div>
    </div>
</template>
<script setup type="ts">
import {reactive, ref} from "vue";

const pageSizes = ref([10, 20, 30, 50, 100]);
const props = defineProps({
    // 是否需要checkbox
    selection: {
        type: Boolean,
        default: () => false
    },
    // 是否需要操作列
    operate: {
        type: Object,
        default: () => {
        }
    },
    loader: {
        type: Function
    },
    params: {},
    fixParams: {}
});

// 数据管理
const dm = reactive({
    data: [],
    total: 0,
    pageSizes: [10, 20, 30, 50, 100],
    params: {
        page: 1,
        size: pageSizes.value[0]
    },
    loading: false
});

const doLoadData = (params) => {
    dm.loading = true;
    params = params || {};
    //加载数据，通过options中的loader加载
    if (props.loader) {
        const _params = {
            // 列表参数
            ...dm.params,
            ...params,
            ...props.params,
            // 固定参数
            ...props.fixParams
        };
        dm.loading = true;
        props.loader(_params).then((res) => {
            res = res.data || {}
            dm.data = res.list;
            dm.total = res.total;
            dm.loading = false;
        }).catch(() => {
            dm.loading = false;
        });
    }
    dm.loading = false;
};

const doSizeChange = (val) => {
    dm.params.size = val;
    doLoadData({});
};

const doCurrentChange = (val) => {
    dm.params.page = val;
    doLoadData({});
};

// 重置分页条件查询
const reloadData = (params) => {
    dm.params.page = 0;
    doLoadData(params);
};

const exposed = {
    doLoadData,
    reloadData
};
defineExpose(exposed);
</script>
